@import "~scss/variables";
@import "~scss/mixins";

.sw-help-sidebar {
    position: fixed;
    z-index: $z-index-help-sidebar;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 40%);

    &__container {
        display: flex;
        flex-direction: column;
        width: 30rem;
        max-width: 100%;
        height: 100%;
        margin-left: auto;
        background: var(--color-elevation-surface-raised);
        border-left: 1px solid var(--color-border-primary-defaul);

        &:focus {
            outline: none;
        }
    }

    &__header {
        @include flex-centering-vertical;

        justify-content: space-between;
        height: var(--scale-size-80);
        padding: 0 var(--scale-size-24);
        border-bottom: 1px solid var(--color-border-primary-default);
    }

    &__body {
        padding: var(--scale-size-24);
    }

    &__footer {
        @include flex-centering-vertical;

        height: var(--scale-size-64);
        margin-top: auto;
        padding: 0 var(--scale-size-24);
        border-top: 1px solid var(--color-border-primary-default);
        background: var(--color-background-primary-disabled);
    }

    &__headline {
        margin: 0;
        color: var(--color-text-primary-default);
        font-size: var(--font-size-m);
        line-height: var(--font-line-height-m);
        font-weight: var(--font-weight-semibold);
    }

    &__button-close {
        border-radius: var(--border-radius-button);
        height: var(--scale-size-32);
        width: var(--scale-size-32);
        display: grid;
        place-items: center;

        &:hover {
            background: var(--color-interaction-secondary-hover);
        }

        &:focus-visible {
            outline: var(--scale-size-2) solid var(--color-border-brand-selected);
            outline-offset: var(--scale-size-2);
        }
    }

    &__navigation .sw-card {
        margin-bottom: var(--scale-size-30);
        border-radius: 0;
        box-shadow: none;
    }

    &__navigation .sw-card__content {
        padding: 0;
    }

    &__support-title {
        margin: 0 0 var(--scale-size-10);
        color: var(--color-text-primary-default);
        font-size: var(--font-size-s);
        font-weight: var(--font-size-semibold);
    }

    &__support-content {
        list-style: none;
    }

    &__support-item {
        @include flex-centering-vertical;

        --_sw-help-sidebar__padding: var(--scale-size-10);

        flex-wrap: wrap;
        padding: var(--_sw-help-sidebar__padding);
        border-radius: var(--border-radius-xs);
        margin-inline-start: calc(var(--_sw-help-sidebar__padding) * -1);

        &:hover {
            background: var(--color-interaction-secondary-hover);
        }
    }

    &__support-item-link.sw-external-link[target="_blank"] {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
        grid-gap: 0 var(--scale-size-8);
        color: var(--color-icon-primary-default);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);
        text-decoration: none;

        .sw-external-link__icon {
            margin-left: calc(var(--scale-size-4) * -1);
        }
    }

    /**
    * @description Vue transition classes
    * @see https://vuejs.org/guide/built-ins/transition.html#Transition-Classes
    */
    &__fade-enter-active {
        @include transition(all, 0.3s, cubic-bezier(0.165, 0.84, 0.44, 1));
    }

    &__fade-leave-active {
        @include transition(all 0.8s cubic-bezier(1, 0.5, 0.8, 1));
    }

    &__fade-enter-from,
    &__fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
}
